<template>
  <div class="list-page-container">
    <a-card>
      <div class="page-container">
        <div class="container-left">
          <SearchLeftTab title="证件类型" :searchTabList="searchTabList" @successCallback="searchLeftTabCallback" />
        </div>
        <div class="container-right ml-10">
          <a-form layout="inline" @keyup.enter.native="handleSearch">
            <a-row :gutter="24">
              <a-col :md="8" :sm="24">
                <CompositeSearch
                  :fieldList="fieldList"
                  @getParams="getSearchValue"
                  @adSearch="onAdSearch"
                  @adClear="onAdClear"
                  @tagClick="onTagClick">
                  <template v-slot:ad-search-content>
                    <a-form-model
                      ref="adSearchFormRef"
                      :model="adSearchFormData"
                      layout="vertical">
                      <a-row :gutter="24">
                        <a-col :span="24">
                          <a-form-model-item label="创建时间">
                            <a-range-picker
                              v-model="createTime"
                              format="YYYY-MM-DD"
                              style="width:100%;"
                              @change="(timeRange, timeStringRange) => setTimeRange('createTimeStart', 'createTimeEnd', timeRange, timeStringRange)"/>
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </a-form-model>
                  </template>
                </CompositeSearch>
              </a-col>
            </a-row>
          </a-form>
          <a-table
            ref="table"
            rowKey="id"
            size="middle"
            bordered
            :loading="loading"
            :columns="columns"
            :dataSource="dataSource"
            :scroll="{ x: 1 }"
            :pagination="pagination">
            <span slot="date" slot-scope="text">{{ text | DateFormat }}</span>
            <template slot="supplierStatus" slot-scope="text"><span>{{ supplierStatusEnum[text] || '' }}</span></template>
            <template slot="action" slot-scope="text, record">
              <span class="cus-text" pointer @click="onCheck(record)">查看</span>
              <span class="cus-text" pointer @click="onDownload(record)">下载</span>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import ListPageMixin from '@/mixins/ListPageMixin.js';
import optionsMixin from '@views/supplier-manage/certification-file/optionsMixin.js';
import SearchLeftTab from '@views/supplier-manage/components/SearchLeftTab.vue'


export default {
  name: 'CertificationFileIndex',
  mixins: [ ListPageMixin, optionsMixin ],
  components: {
    SearchLeftTab
  },
  data() {
    return {
      searchTabList: [],
      adSearchFormData: {
        createTimeStart: '',
        createTimeEnd: '',
      },
      createTime: [],
      dataSource: [],
      originalDataSource: [
        {
          certificationName: '营业执照',
          certificationType: '企业经营执照',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '税务登记证',
          certificationType: '税务登记证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '组织机构代码证',
          certificationType: '组织机构代码证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '安全生产许可证',
          certificationType: '安全生产许可证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '工业产品生产许可证',
          certificationType: '工业产品生产许可证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '进出口资质',
          certificationType: '进出口资质',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: 'ISO 9001质量管理体系认证',
          certificationType: 'ISO 9001质量管理体系认证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '行业专项认证',
          certificationType: '行业专项认证',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '检测报告',
          certificationType: '检测报告',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '型式试验证书',
          certificationType: '型式试验证书',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '专利证书',
          certificationType: '专利证书',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        },
        {
          certificationName: '技术授权协议',
          certificationType: '技术授权协议',
          expirationTime: '2024-06-09',
          version: 'V1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS6667787990',
          submitter: '杨先生',
          submitTime: '2023-06-08 11:08:30',
          updateTime: '2023-06-08 11:08:30',
        }
      ]
    }
  },
  created() {
    this.getSearchTabList();
    this.handleSearch();
  },
  methods: {
    getSearchTabList() {
      this.searchTabList = [
        { label: '营业执照', value: '1' },
        { label: '税务登记证', value: '2' },
        { label: '组织机构代码证', value: '3' },
        { label: '安全生产许可证', value: '4' },
        { label: '工业产品生产许可证', value: '5' },
        { label: '进出口资质', value: '6' },
        { label: 'ISO 9001质量管理体系认证', value: '7' },
        { label: '行业专项认证', value: '8' },
        { label: '检测报告', value: '9' },
        { label: '型式试验证书', value: '10' },
        { label: '专利证书', value: '11' },
        { label: '技术授权协议', value: '12' },
      ]
    },
    // 获取 搜索框参数
    getSearchValue(currentValue, selectFiledList) {
      console.log(currentValue, selectFiledList, 'getSearchValue');
      this.handleSearch();
    },
    // 确定搜索 高级搜索
    onAdSearch() {
      console.log(this.adSearchFormData, '确定搜索 高级搜索');
      this.handleSearch();
    },
    // 重置 高级搜索
    onAdClear() {
      console.log('重置 高级搜索');
    },
    onTagClick(data) {
      console.log(data, 'onTagClick');
      const { name } = data;
      if (['筛选组合01', '筛选组合02', '筛选组合03'].includes(name)) {
        this.adSearchFormData.supplierStatus = '1';
        this.adSearchFormData.approveStatus = '1';
      } else if (['筛选组合04', '筛选组合05', '筛选组合06'].includes(name)) {
        this.adSearchFormData.supplierStatus = '2';
        this.adSearchFormData.approveStatus = '2';
      } else {
        this.adSearchFormData.supplierStatus = '3';
        this.adSearchFormData.approveStatus = '3';
      }
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.onSelectClear();
        this.dataSource = this.originalDataSource
      }, 100)
    },
    searchLeftTabCallback(data) {
      if (data) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.onSelectClear();
          this.dataSource = this.originalDataSource.filter(item => item.certificationName === data.label);
        }, 100)
      } else {
        this.handleSearch();
      }
    },
    onCheck(record) {

    },
    onDownload(record) {

    },
  }
}
</script>

<style lang="less" scoped>
.page-container {
  display: flex;
  .container-left {
  }
  .container-right {
    width: calc(100% - 250px);
  }
}

</style>